{% extends 'layout/manage.html' %}
{% load static %}

{% block title %} {% endblock %}
{% block css %}
{#    <link rel="stylesheet" href="{% static 'plugin/editor.md-master/css/editormd.preview.min.css' %}">#}

    <link rel="stylesheet" href="{% static 'plugin/editor.md-master/css/editormd.min.css' %}">
{#    <link rel="stylesheet" href="{% static 'plugin/editor.md-master/lib/codemirror/codemirror.min.css' %}">#}
{#    <link rel="stylesheet" href="{% static 'plugin/editor.md-master/lib/codemirror/addon/dialog/dialog.css' %}">#}
{#    <link rel="stylesheet" href="{% static 'plugin/editor.md-master/lib/codemirror/addon/search/matchesonscrollbar.css' %}">#}

    <style>
        .issues-list .number {
            width: 100px;
            text-align: right;
        }

        .issues-list .number a {
            font-weight: 500;
            padding: 0 10px;
        }

        .issues-list .issue .tags {
            padding: 10px 0;
        }

        .issues-list .issue .tags span {
            margin-right: 20px;
            display: inline-block;
            font-size: 12px;
        }

        .issues-list .issue .tags .type {
            color: white;
            padding: 1px 5px;
            border-radius: 5px;
        }

        .pd-0 {
            padding: 0 !important;
            width: 50%;
        }

        .clearfix label {
            width: 20%;
            text-align: right;
        }

        .clearfix .col-sm-10 {
            width: 80%;
        }
    </style>






{% endblock %}


{% block content %}
    <div class="container-fluid clearfix" style="padding: 20px 0;">
        <!-- 框架左侧 -->
        <div class="col-sm-3">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <i class="fa fa-search" aria-hidden="true"></i> 筛选
                </div>
                <div class="panel-body"></div>
            </div>
        </div>


        <!-- 框架右侧 -->
        <div class="col-sm-9">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <i class="fa fa-quora" aria-hidden="true"></i> 问题
                </div>

                <div class="panel-body">
                    <a class="btn btn-success btn-sm" data-toggle="modal" data-target="#addModal">新建问题</a>
                    <a class="btn btn-success btn-sm">邀请新成员</a>
                </div>
                <!-- Table -->
                <table class="table">
                    <tbody class="issues-list">
                    <tr>
                        <td class="number">
                            11
                        </td>
                        <td class="issues">
                            <div>22</div>
                            <div class="tags">33</div>
                        </td>
                    </tr>
                    </tbody>

                </table>
            </div>
            <!-- 分页 -->
            <nav aria-label="...">
                <ul class="pagination" style="margin-top: 0;">
                    <li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a>
                    </li>
                    <li class="active"><a href="#">1 <span class="sr-only">(current)</span></a></li>
                    <li><a href="#">2</a></li>
                    <li><a href="#">3</a></li>
                    <li><a href="#">4</a></li>
                    <li><a href="#">5</a></li>
                    <li><a href="#">6</a></li>
                </ul>
            </nav>
        </div>

    </div>

    <!-- 新建问题模态对话框 -->
    <div id="addModal" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog"
         aria-labelledby="myLargeModalLabel">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <!-- 模态对话框头部 -->
                <div class="modal-header">
                    <!-- 模态对话框右上角关闭按钮 -->
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">x</span>
                    </button>
                    <!-- 模态对话框标题 -->
                    <h4 class="modal-title"> 新建问题 </h4>
                </div>

                <!-- 模态对话框内容体 -->
                <div class="modal-body" style="padding-right: 40px;">
                    <!-- 表单 -->
                    <form id="addForm" class="form-horizontal">
                        {% csrf_token %}
                        <!-- 问题类型 -->
                        <div class="form-group">
                            <label for="{{ form.issues_type.id_for_label }}"
                                   class="col-sm-2 control-label">{{ form.issues_type.label }}</label>
                            <div class="col-sm-10">
                                <div>
                                    <div>
                                        {{ form.issues_type }}
                                    </div>
                                    <div class="error-msg"></div>
                                </div>
                                <div class="error-msg"></div>
                            </div>
                        </div>

                        <!-- 标题 -->
                        <div class="form-group">
                            <label for="{{ form.subject.id_for_label }}"
                                   class="col-sm-2 control-label">{{ form.subject.label }}</label>
                            <div class="col-sm-10">
                                <div>
                                    <div>
                                        {{ form.subject }}
                                    </div>
                                    <div class="error-msg"></div>
                                </div>
                                <div class="error-msg"></div>
                            </div>
                        </div>

                        <!-- 所属模块 -->
                        <div class="form-group">
                            <label for="{{ form.module.id_for_label }}"
                                   class="col-sm-2 control-label">{{ form.module.label }}</label>
                            <div class="col-sm-10">
                                <div>
                                    <div>
                                        {{ form.module }}
                                    </div>
                                    <div class="error-msg"></div>
                                </div>
                                <div class="error-msg"></div>
                            </div>
                        </div>

                        <!-- 问题描述 -->
                        <div class="form-group">
                            <label for="{{ form.desc.id_for_label }}"
                                   class="col-sm-2 control-label">{{ form.desc.label }}</label>
                            <div class="col-sm-10">
                                <div>
                                    <div id="desc_editor" style="width: 100%">
                                        {{ form.desc }}
                                    </div>
                                </div>
                                <div class="error-msg"></div>
                            </div>
                        </div>

                        <!-- 分栏处理 -->
                        <div class="form-group clearfix">
                            <!-- 问题状态 -->
                            <div class="col-sm-6 pd-0" style="width: 50%;">
                                <label for="{{ form.status.id_for_label }}"
                                       class="col-sm-2 control-label" style="width: 20%;">{{ form.status.label }}</label>
                                <div class="col-sm-10" style="width: 80%">
                                    <div>
                                        <div>
                                            {{ form.status }}
                                        </div>
                                    </div>
                                    <div class="error-msg"></div>
                                </div>
                            </div>


                            <!-- 问题优先级 -->
                            <div class="col-sm-6 pd-0">
                                <label for="{{ form.priority.id_for_label }}"
                                       class="col-sm-2 control-label">{{ form.priority.label }}</label>
                                <div class="col-sm-10">
                                    <div>
                                        <div>
                                            {{ form.priority }}
                                        </div>
                                    </div>
                                    <div class="error-msg"></div>
                                </div>
                            </div>
                        </div>
                    </form>

                </div>

                <!-- 模态对话框底部 -->
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary">确定</button>
                </div>
            </div>
        </div>
    </div>

{% endblock %}



{% block js %}
    <script src="{% static 'plugin/editor.md-master/editormd.min.js' %}"></script>
    <script src="{% static 'plugin/editor.md-master/lib/marked.min.js' %}"></script>
    <script src="{% static 'plugin/editor.md-master/lib/prettify.min.js' %}"></script>
    <script src="{% static 'plugin/editor.md-master/lib/raphael.min.js' %}"></script>
    <script src="{% static 'plugin/editor.md-master/lib/underscore.min.js' %}"></script>
    <script src="{% static 'plugin/editor.md-master/lib/sequence-diagram.min.js' %}"></script>
    <script src="{% static 'plugin/editor.md-master/lib/flowchart.min.js' %}"></script>
    <script src="{% static 'plugin/editor.md-master/lib/jquery.flowchart.min.js' %}"></script>
    <script>
        // wiki上传图片地址，，适用所有上传地址
        const WIKI_UPLOAD_URL = "{% url 'web:wiki_upload' project_id=request.tracer.project.id %}";
        $(function () {
            // 在模态对话框每次出现时，初始化markdown编辑器
            bindBootStrapShownEvent();
        });

        // 在模态对话框每次出现时，初始化markdown编辑器
        // 原因，BootStrap跟markdown有点不兼容，需要再次初始化

        function bindBootStrapShownEvent() {
            $('#addModal').on('shown.bs.modal', function (event) {
                // 模态对话框弹出时，下面的内容被触发
                // do something...
                initEditorMd();
            })
        }

        // 初始化markdown编辑器（textarea转换）
        function initEditorMd() {
            editormd('desc_editor', {
                placeholder: "请输入内容",
                height: 500,
                path: "{% static 'plugin/editor.md-master/lib/' %}",
                imageUpload: true,
                imageFormats: ['jpg', 'jpeg', 'png', 'gif'],
                imageUploadURL: WIKI_UPLOAD_URL
            })
        }
    </script>

{% endblock %}